<template>
  <form @submit.prevent="login">
    <div class="form-floating">
      <input
        v-model="data.email"
        type="email"
        class="form-control"
        placeholder="name@example.com"
      />
      <label for="floatingInput">Email</label>
    </div>
    <div class="form-floating">
      <input
        v-model="data.password"
        type="password"
        class="form-control"
        placeholder="Password"
      />
      <label for="floatingPassword">Password</label>
    </div>

    <button class="btn btn-primary w-100 py-2" type="submit">Log in</button>
  </form>
</template>

<script setup>
import { reactive } from "vue";

import { useRouter } from "vue-router";

const data = reactive({
  email: "",
  password: "",
});

const router = useRouter();

const login = async () => {
  console.log(data);

  try {
    const res = await fetch("http://localhost:5109/api/Auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });

    const result = await res.json();

    const jwtToken = result.jwt;

    console.log(jwtToken);

    localStorage.setItem("authToken", jwtToken);

    await router.push("/");
  } catch {
    console.log("登录失败！！！");
  }
};
</script>
